<template>
  <div
    style="
      width: 600px;
      height: 300px;
      position: relative;
      z-index: 2;
      background: skyblue;
    "
  >
    <h1>我是盒子2</h1>
    <button @click="isShow = true">显示弹框</button>

    <Teleport to="#app">
      <XtxDialog title="警告" :visible="isShow" @close="handleCloseFn">
        <template #default>
          <p>我是内容</p>
          <p>我是内容</p>
          <p>我是内容</p>
          <p>我是内容</p>
        </template>

        <template #footer>
          <XtxButton
            type="gray"
            style="margin-right: 20px"
            @click="isShow = false"
            >否</XtxButton
          >
          <XtxButton type="primary">是</XtxButton>
        </template>
      </XtxDialog>
    </Teleport>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isShow = ref(false)

    const handleCloseFn = (flag) => {
      isShow.value = false
    }
    return {
      isShow,
      handleCloseFn
    }
  }
}
</script>
